<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <router-link class="navbar-brand" to="/page1">电影管理系统</router-link>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link class="nav-link" to="/page1">首页</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/DeleteMovie">删除电影</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/UpdateMovieName">更新电影名</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/RankMovie">通过排名获取电影</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/Score">根据分数查询电影</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/Scorebig">查询分数大于指定值的电影</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/InsertMovie">插入电影</router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </template>
  
  <script>
  export default {
    name: 'NavBar'
  }
  </script>
  
  <style scoped>
  .navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
  
  .navbar-brand {
    font-weight: bold; /* 加粗品牌文字 */
    font-size: 1.5rem; /* 增大品牌文字大小 */
  }
  
  .nav-link {
    font-size: 1.1rem; /* 增大导航链接文字大小 */
    margin: 0 10px; /* 增加导航链接之间的间距 */
    color: #333; /* 设置默认文字颜色 */
  }
  
  .nav-link:hover {
    color: #007bff; /* 鼠标悬停时改变文字颜色 */
    text-decoration: none; /* 移除下划线 */
  }
  
  .nav-item.active .nav-link {
    color: #007bff; /* 当前活动路由的文字颜色 */
    font-weight: bold; /* 当前活动路由的文字加粗 */
  }
  </style>